<template>
    <el-container>
        <el-header>
            <navigation :comments="comments" />
        </el-header>
        <el-main>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column label="序号" width="80" type="index">
                </el-table-column>
                <el-table-column label="用户名" prop="username">
                </el-table-column>
                <el-table-column label="邮箱" prop="email">
                </el-table-column>
                <el-table-column label="注册时间" sortable prop="createTime">
                </el-table-column>
                <el-table-column align="right" width="180">
                    <template #header>
                        <el-input v-model="searchText" placeholder="输入用户名搜索" :blur="search" />
                    </template>
                    <template #default="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">Delete
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="12" :offset="6" style="margin-top: 20px">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageData.total">
                </el-pagination>
            </el-col>
        </el-main>
    </el-container>
</template>

<script>
import navigation from './Navigation.vue'
import axios from 'axios'
export default {
    name: 'userTable',
    components: {
        navigation,
        axios
    },
    data() {
        return {
            comments: [
                '用户管理',
                '用户列表'
            ],
            tableData: {
                data: [],
                no: '',
                name: '',
                gender: '',
            },
            loading: true,
            searchText: '',
            pageData: {
                total: '',
                currentRow: '',
                multipleSelection: [],
                currentPage: 1,
                pageSize: 10,
            },
            editUser: {
                dialog: false,
                loading: false,
                tips: '添加用户',
                dialogVisible: false,
                formLabelWidth: '80px',
                disabled: true,
                timer: null,
                form: {
                    options: [],
                    page: 'add',
                    name: '',
                    mail: ''
                },
            },
        }
    },
    methods: {
        findAllUsers() {
            console.log("findAllUsers");
            this.loading = true;
            axios.get("http://localhost:8080/user?pageNum=" +
                this.pageData.currentPage + "&size=" + this.pageData.pageSize
                + "&username=" + this.searchText)
                .then(data => {
                    let res = data.data;
                    if (res.code == 1) {
                        this.tableData.data = res.data.list;
                        this.pageData.total = res.data.total;
                        this.pageData.currentPage = res.data.pageNum;
                        this.pageData.pageSize = res.data.pageSize;
                        this.loading = false;
                    } else {
                        this.$router.push('/error');
                    }
                })
                .catch();
        },
        handleCurrentChange(val) {
            this.pageData.currentPage = val;
            this.findAllUsers();
        },
        handleSizeChange(val) {
            this.pageData.pageSize = val;
            this.findAllUsers();
        },
        handleClose(done) {
            if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then((_) => {
                    this.loading = true
                    this.timer = setTimeout(() => {
                        done()
                        setTimeout(() => { // 动画关闭需要一定的时间
                            this.loading = false
                        }, 400)
                    }, 2000)
                }).catch();
        },
        handleEdit(row) {
            this.editUser.dialogVisible = true;
            this.editUser.tips = "修改用户信息";
            let form = this.editUser.form;
            console.log(row);
            form.page = "edit";
            form.name = row.username;
            form.mail = row.mail;
        },
        handleDelete(row) { // 删除用户信息
            const _this = this;
            this.$confirm('此操作将永久删除' + row.username + ', 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    axios.post("http://localhost:8080/user/delete?id=" + row.id)
                        .then((data) => {
                            if (data.data.code === 1) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!',
                                });
                                _this.findAllUsers();
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: '删除失败',
                                })
                            }
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                });
        },
        search() {
            this.findAllUsers();
        },
        filterTableData() {
            computed(() =>
                tableData.data.filter(
                    (data) =>
                        !searchText.value ||
                        data.username.toLowerCase().includes(searchText.value.toLowerCase())
                )
            )
        }
    },
    mounted() {
        this.findAllUsers();
    },
}
</script>

<style scoped>
.el-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
}
</style>